<template>
    <div>
        <a-menu v-model="current" mode="horizontal" @click="handleClick">
            <a-menu-item key="indexPage">图书首页</a-menu-item>
            <a-menu-item key="queryPage">图书查询</a-menu-item>
            <a-menu-item key="starPage">历史评分</a-menu-item>
            <a-menu-item key="goodPage">我的推荐</a-menu-item>
        </a-menu>

        <BookIndex v-if="curIndex == 'indexPage'" @bookDetail="bookDetail"></BookIndex>
        <BookQuery v-if="curIndex == 'queryPage'" @bookDetail="bookDetail"></BookQuery>
        <BookStar  v-if="curIndex == 'starPage'" @bookDetail="bookDetail"></BookStar>
        <BookGood  v-if="curIndex == 'goodPage'" @bookDetail="bookDetail"></BookGood>
        <BookDetail v-if="curIndex == 'bookDetail'" @bookDetail="bookDetail"  :bookId="bookId"></BookDetail>
    </div>
</template>
<script>
    import BookIndex from '@/views/user/bookIndex'
    import BookDetail from '@/views/user/bookDetail'
    import BookQuery from '@/views/user/bookQuery'
    import BookStar from '@/views/user/bookStar'
    import BookGood from '@/views/user/bookGood'
    export default {
        data() {
            return {
                current: ['indexPage'],
                curIndex:'indexPage',
                bookId:''
            };
        },
        components: {
            BookIndex,BookDetail,BookQuery,BookStar,BookGood
        },
        methods: {
            handleClick(e) {
                this.curIndex =e.key
            },
            bookDetail(id) {
                this.curIndex = 'bookDetail';
                this.bookId = id;
            }
        }
    };
</script>
<style scoped>

</style>
